<template>
	<view style="display: flex;flex-direction: column;">
		<view class="top-group-view" :style="'background-image: url('+baseImageUrl+'/main/img_home_top.png);'">
			<view class="top-title-view" :style="'height:'+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<!-- <image src="../../static/main/ic_home_logo.png"></image> -->
				<image :src="baseImageUrl+'/main/ic_home_logo.png'"></image>
			</view>
		</view>
		<view style="position: relative;" :style="'margin-top:'+navHeight+'px'">
			<image :src="baseImageUrl + '/main/img_home_bottom.png'" class="bg-img-view"></image>
			<view style="width: 100vw;">
				<mescroll-uni :top="navHeight*2" :fixed="true" ref="mescrollRef" @init="mescrollInit" :up="upOption"
					:down="downOption" @up="upCallback" @down="downCallback">
					<view style="display: flex;flex-direction: column;">
						<view style="display: flex;align-items: center;margin-top: 6rpx;">
							<scroll-view class="tab" scroll-x="true" :scroll-left="scrollLeft">
								<block v-for="(item,index) in tabData" :key="index">
									<view  class="tab-item" :class=" [currentTab==index ? 'active' : 'none'] "
										:data-current="index" @click="clickTab">
										{{item.name}}
									</view>
								</block>
							</scroll-view>
							<view class="top-account-view" @click="chooseAccount">
								<text style="color: #999999;font-size: 24rpx;margin-right: 10rpx;">{{accountInfo.nickName}}</text>
								<image src="../../static/main/ic_arrow_bottom.png" style="width: 20rpx;height: 20rpx;"></image>
							</view>
						</view>
					<!-- 	<view class="order-stat-group"
							:style="'background-image: url('+baseImageUrl+'/main/img_home_center.png);'">
							<uni-home-card :statInfo="statInfo"></uni-home-card>
						</view> -->
						<view  class="order-stat-group"
							style="background-color: #9574F3;border-radius: 20rpx">
							<uni-home-card :statInfo="statInfo"></uni-home-card>
						</view>
						<view class="center-group-view">
							<view class="center-item" @click="centerItemClick(-1)">
								<image :src="baseImageUrl + '/main/icon_home1.png'"></image>
								<text>鑫AI</text>
							</view>
							<view class="center-item" @click="centerItemClick(2)">
								<image :src="baseImageUrl + '/main/icon_home2.png'"></image>
								<text>最新爆品</text>
							</view>
							<!-- 	<view class="center-item" @click="centerItemClick(3)">
								<image :src="baseImageUrl + '/main/icon_home3.png'"></image>
								<text>达人榜单</text>
							</view> -->
							<view class="center-item" @click="centerItemClick(3)">
								<image :src="baseImageUrl + '/main/icon_home3.png'"></image>
								<text>去水印</text>
							</view>
							<view class="center-item" @click="centerItemClick(4)">
								<image :src="baseImageUrl + '/main/icon_home4.png'"></image>
								<text>账号管理</text>
							</view>
						</view>

						<!-- 	<view class="center-group-view">
							<view v-for="(item,index) in aiNames" :key="index" class="center-item" @click="centerItemClick(5+index)"> 
								<image :src="baseImageUrl + '/main/icon_home1.png'"></image>
								<text>{{item}}</text>
							</view>
						</view> -->

				<!-- 		<view style="margin: 0rpx 32rpx 32rpx 32rpx;">
							<uni-home-banner :imgList="imgList" :height="88" :radius="16"
								:mode="'round'"></uni-home-banner>
						</view> -->
						<view style="margin-top: 20rpx;" v-for="(item, index) in orderList" :key="index" :id="index">
							<uni-order-item @changeEye="changeOeye" :eyeOpen="oEyeOpen" :orderInfo="item" @onItemClick="itemClick(item)"></uni-order-item>
							<view style="padding: 0 40rpx;" class="order-avatar" v-if="avatarInfoMap">
								<view
									style="height: 80rpx;display: flex;padding: 5rpx 0rpx;align-items: center;border-top: 2rpx solid #F1F4F8;">
									<image style="height: 50rpx;width: 50rpx;border-radius: 50%;"
										:src="aEyeOpen?avatarInfoMap[item.authorOpenid].avatar:`${baseImageUrl}/main/main_logo.png`" mode="aspectFit"></image>
									<text
										style="flex: 1;margin-left: 20rpx;color: #999999;font-size: 20rpx;">{{aEyeOpen?avatarInfoMap[item.authorOpenid].name:'账号信息已隐藏'}}</text>
									<view @click="changeAeye" class="eye" style="align-items: flex-end;display: flex;align-items: center;">
										<image style="width: 35rpx;height: 35rpx;" :src="aEyeOpen?`${baseImageUrl}/main/eye-fill.png`:`${baseImageUrl}/main/eye-close.png`" mode="aspectFit"></image>
									</view>
								</view>
							</view>
							<view class="block" style="height: 20rpx;background-color: #F6F7FB;"></view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<view v-if="!isLogin" class="bottom-no-login" :style="'margin-top: '+marginTopHeight+'px;'">
			当前为示例数据，登录后可正常查看
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniHomeCard from '@/components/uni-home/uni-home-card.vue';
	import uniHomeBanner from '@/components/uni-home/uni-home-banner.vue';
	import uniOrderItem from '@/components/uni-home/uni-order-item.vue';
	import configUrls from '../../common/config.js';
	export default {
		mixins: [MescrollMixin],
		components: {
			uniHomeBanner,
			uniHomeCard,
			uniOrderItem
		},
		data() {
			return {
				aiNames: ['账号诊断', '百问百答', '账号起名', '鑫AI'],
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				aEyeOpen:true,
				oEyeOpen:true,
				navigationBarHeight: 0,
				navHeight: 0,
				avatarInfoMap: null,
				tabData: [{
						id: 0,
						name: "昨日",
						value: "4"
					},
					{
						id: 1,
						name: "今天",
						value: "5"
					},
					{
						id: 2,
						name: "近7日",
						value: "2"
					},
					{
						id: 3,
						name: "近30日",
						value: "3"
					},
					{
						id: 4,
						name: "本月",
						value: "6"
					},
					{
						id: 5,
						name: "上月",
						value: "7"
					}
				],
				currentTab: 1,
				scrollLeft: 0,
				windowWidth: 0,
				chooseType: "5",
				statInfo: {
					totalPayAmount: 0.00,
					orderCount: 0,
					estimatedCommission: 0.00,
					validPayAmount: 0.00,
					validOrderCount: 0,
					validEstimatedCommission: 0.00,
					refundPayAmount: 0.00,
					refundOrderCount: 0,
					refundEstimatedCommission: 0.00,
					refundRatio: 0,
				},
				imgList: [],
				upOption: {
					noMoreSize: 5,
					empty: {
						icon: '/static/mine/img_manage_empty.png',
						tip: '没有订单',
					},
					textNoMore: '~ 没有更多订单 ~'
				},
				downOption: {
					native: false,
				},
				orderList: [],
				marginTopHeight: 0,
				isLogin: false,
				accountInfo: {"nickName": "账号名称", "displayId": ""},
			}
		},
		onReady() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
			this.navHeight = this.iStatusBarHeight + this.navigationBarHeight;
		},
		onLoad(options) {
			wx.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
					this.marginTopHeight = res.windowHeight - 51;
				}
			});
			this.getHomeBanner();
			this.getOrderState();
		},
		onShow() {
			this.isLogin = uni.getStorageSync("isLogin");
		},
		methods: {
			clickItem(item){
				console.log(item)
			},
			chooseAccount() {
				//监听事件
				let that = this;
				this.$eventHub.$on('chooseAccount', function(item) {
					that.accountInfo.nickName = item.nickName;
					that.accountInfo.displayId = item.displayId;
					that.downCallback();
				       //清除监听，不清除会消耗资源
				    that.$eventHub.$off('chooseAccount');
				});
				uni.navigateTo({
					url: '/subpages/pages/chooseAccount?displayId='+this.accountInfo.displayId
				})
			},
			changeAeye(){
				this.aEyeOpen = !this.aEyeOpen
			},
			changeOeye(){
				this.oEyeOpen = !this.oEyeOpen
			},
			upCallback(page) {
				var that = this;
				this.$Request.postJson(configUrls.getOrderList, {
					page: page.num,
					limit: 10,
					type: that.chooseType,
					displayId: that.accountInfo.displayId
				}).then(res => {
					if (res.code == "10000") {
						const respData = res.data.result;
						if (respData == null) {
							that.mescroll.endSuccess(0);
							return;
						}
						if (res.extra.auths && !this.avatarInfoMap) { //服务器返回授权 avatarInfoMap为空
							this.avatarInfoMap = res.extra.auths
						}
						that.mescroll.endSuccess(respData.length);
						if (page.num == 1) that.orderList = [];
						that.orderList = that.orderList.concat(respData);
					} else {
						that.orderList = [];
						that.mescroll.endSuccess(0);
						that.mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			downCallback: function() {
				this.getOrderState();
				this.mescroll.resetUpScroll();
			},
			itemClick(item) {
				uni.navigateTo({
					url: '/subpages/pages/productDetail?goodsId='+item.pid+"&orderId="+item.orderId+"&chooseType="+this.chooseType+"&accountInfo="+ JSON.stringify(this.accountInfo)
				})
			},
			clickTab(e) {
				let clickIndex = e.target.dataset.current;
				let singleNavWidth = this.windowWidth / 5;
				this.scrollLeft = (clickIndex - 2) * singleNavWidth;
				this.currentTab = clickIndex;
				this.chooseType = this.tabData[clickIndex].value;
				this.getOrderState();
				this.mescroll.resetUpScroll();
			},
			getHomeBanner() {
				let that = this;
				this.$Request.postJson(configUrls.getHomeBanner, {}).then(res => {
					if (res.code == "10000") {
						that.imgList = res.data.result;
					}
				});
			},
			getOrderState() {
				let that = this;
				this.$Request.postJsonLoadView(configUrls.getOrderState, {
					type: that.chooseType,
					displayId: that.accountInfo.displayId
				}).then(res => {
					if (res.code == "10000") {
						that.statInfo = res.data.result;
					}
				});
			},
			centerItemClick(index) {
				if (index == 1) {
					uni.switchTab({
						url: '/pages/material/material'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: './explosives'
					})
				} else if (index == 3) {
					// uni.navigateTo({
					// 	url:'./talentList'
					// })
					uni.navigateTo({
						url: '/pages/dy/video'
					})
					//由榜单改成工具 去水印
				} else if (index == 4) {
					uni.navigateTo({
						url: '../mine/manage'
					})
				} else { //都跳转到AI
					let url = encodeURIComponent("https://vue.douxcm.com/dx/article/detail?id=13&hideBack=true")
					uni.navigateTo({
						url:'/pages/web/web?url='+url+"&titleStr=鑫AI"
					})
				}
			}
		},
	}
</script>

<style>
	@import url("../../css/main/main.css");
</style>